<div
  cdkDrag
  cdkDragHandle
  cdkDragRootElement=".cdk-overlay-pane"
  class="d-flex align-items-center justify-content-between"
  style="cursor: move; margin-top: -24px; padding-top: 10px">
  <h1 mat-dialog-title class="dialog-title">
    {{ 'general.FILTER_MATCH_ALL' | translate }}
  </h1>
  <button
    aria-label="Close icon button"
    class="d-flex align-items-center justify-content-center"
    mat-icon-button>
    <i (click)="dialogRef.close()" class="eos-icons">close</i>
  </button>
</div>
<hr class="fancy mt-1 mb-4 mx-0" />
<div mat-dialog-content>
  <form [formGroup]="form">
    <section class="row mx-0 my-3 align-items-center">
      <span class="d-block col-3">
        {{ 'securityEvent.SEVERITY' | translate }}
      </span>
      <div formArrayName="severity" class="mt-2 col-9 row">
        <ng-container *ngFor="let severity of severityFormArray.controls; let i = index">
          <mat-checkbox class="mr-3" [formControlName]="i"  class="col-sm-3">
            {{ filterSeverity[i] }}
          </mat-checkbox>
        </ng-container>
      </div>
    </section>
    <section class="row mx-0 my-3 align-items-center">
      <span class="d-block col-3">
        {{ 'securityEvent.LOCATION' | translate }}
      </span>
      <div formArrayName="location" class="mt-2 col-9 row">
        <ng-container *ngFor="let location of locationFormArray.controls; let i = index">
          <mat-checkbox class="mr-3" [formControlName]="i" class="col-sm-3">
            {{ filterLocation[i] }}
          </mat-checkbox>
        </ng-container>
      </div>
    </section>
    <section class="row mx-0 my-3 align-items-center">
      <span class="d-block col-3">
        {{ 'event.gridHeader.CATEGORY' | translate }}
      </span>
      <div formArrayName="category" class="mt-2 col-9 row">
        <ng-container *ngFor="let category of categoryFormArray.controls; let i = index">
          <mat-checkbox class="mr-3" [formControlName]="i" class="col-sm-3">
            {{ filterCategory[i] }}
          </mat-checkbox>
        </ng-container>
      </div>
    </section>
    <section class="row mx-0 my-3 align-items-center">
      <span class="d-block col-3">
      </span>
      <div formArrayName="other" class="mt-2 col-9 row">
        <ng-container *ngFor="let other of otherFormArray.controls; let i = index">
          <mat-checkbox class="mr-3" [formControlName]="i" class="col-sm-3">
            {{ filterOther[i] }}
          </mat-checkbox>
        </ng-container>
      </div>
    </section>
    <mat-divider></mat-divider>
    <section class="row mx-0 align-items-center">
      <span class="d-block col-3">{{ 'securityEvent.HOST' | translate }}</span>
      <mat-form-field appearance="standard" class="col pl-0">
        <input
          type="text"
          aria-label="Host"
          matInput
          formControlName="host"
          id="selectedHost"
          [matAutocomplete]="hostAuto" />
        <mat-autocomplete #hostAuto="matAutocomplete">
          <mat-option *ngFor="let host of filteredHosts | async" [value]="host">
            {{ host }}
          </mat-option>
        </mat-autocomplete>
        <mat-error
          *ngIf="form.controls.host.hasError('invalidAutocompleteString')">
          {{
            'securityEvent.AUTOCOMPLETE_INVALID'
              | translate: { field: ('securityEvent.HOST' | translate) }
          }}
        </mat-error>
      </mat-form-field>
    </section>
    <section class="row mx-0 align-items-center">
      <span class="d-block col-3">{{'securityEvent.SOURCE' | translate}}</span>
      <mat-form-field appearance="standard" class="col pl-0">
        <input
          type="text"
          aria-label="Source"
          matInput
          formControlName="source"
          id="selectedSource"
          [matAutocomplete]="sourceAuto" />
        <mat-autocomplete #sourceAuto="matAutocomplete">
          <mat-option *ngFor="let source of filteredSources | async" [value]="source">
            {{ source }}
          </mat-option>
        </mat-autocomplete>
        <mat-error
          *ngIf="form.controls.source.hasError('invalidAutocompleteString')">
          {{
            'securityEvent.AUTOCOMPLETE_INVALID'
              | translate: { field: ('securityEvent.SOURCE' | translate) }
          }}
        </mat-error>
      </mat-form-field>
    </section>
    <section class="row mx-0 align-items-center">
      <span class="d-block col-3">{{ 'securityEvent.DESTINATION' | translate }}</span>
      <mat-form-field appearance="standard" class="col pl-0">
        <input
          type="text"
          aria-label="Destination"
          matInput
          formControlName="destination"
          id="selectedDestination"
          [matAutocomplete]="destinationAuto" />
        <mat-autocomplete #destinationAuto="matAutocomplete">
          <mat-option *ngFor="let destination of filteredDestinations | async" [value]="destination">
            {{ destination }}
          </mat-option>
        </mat-autocomplete>
        <mat-error
          *ngIf="form.controls.destination.hasError('invalidAutocompleteString')">
          {{
            'securityEvent.AUTOCOMPLETE_INVALID'
              | translate: { field: ('securityEvent.DESTINATION' | translate) }
          }}
        </mat-error>
      </mat-form-field>
    </section>
    <section class="row mx-0 align-items-center">
      <label class="col-3 font-weight-normal mb-0" for="namespaceInput">{{
        'securityEvent.DOMAIN' | translate
      }}</label>
      <mat-form-field appearance="standard" class="col pl-0">
        <mat-chip-list
          #chipList
          aria-label="Namespace selection"
          formControlName="selectedDomains"
          id="namespaceInput">
          <mat-chip
            (removed)="remove(domainChip)"
            *ngFor="let domainChip of form.controls.selectedDomains.value">
            {{ domainChip }}
            <button matChipRemove>
              <mat-icon>cancel</mat-icon>
            </button>
          </mat-chip>
          <input
            #namespaceInput
            (matChipInputTokenEnd)="add($event)"
            [formControl]="namespaceCtrl"
            [matAutocomplete]="auto"
            [matChipInputFor]="chipList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
            [placeholder]="'ldap.ADD_DOMAIN' | translate" />
        </mat-chip-list>
        <mat-autocomplete
          #auto="matAutocomplete"
          (optionSelected)="selected($event)">
          <mat-option
            *ngFor="let domain of filteredDomains | async"
            [value]="domain">
            {{ domain }}
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
    </section>
    <section class="row mx-0 align-items-center">
      <span class="d-block col-3">{{
        'securityEvent.OTHER_KEYWORD' | translate
      }}</span>
      <mat-form-field appearance="standard" class="col pl-0">
        <input
          formControlName="includedKeyword"
          id="includedKeyword"
          matInput />
      </mat-form-field>
    </section>
    <section class="row mx-0 align-items-center">
      <span class="d-block col-3">{{
        'securityEvent.EXCLUDED_KEYWORD' | translate
      }}</span>
      <mat-form-field appearance="standard" class="col pl-0">
        <input
          formControlName="excludedKeyword"
          id="excludedKeyword"
          matInput />
      </mat-form-field>
    </section>
  </form>
</div>
<div class="float-right" mat-dialog-actions>
  <button (click)="reset()" mat-button>Reset</button>
  <button
    [mat-dialog-close]="form.value"
    [disabled]="!form.valid"
    cdkFocusInitial
    color="primary"
    mat-raised-button>
    Apply
  </button>
</div>
